<template>
  <div class="interactive">
    <div class="phone">
        <a href="tel:13806000420">
            <div>
                <img src="../../../static/img/icon-dianhuazixun.png" alt="">
            </div>
            <p>销售热线</p>
        </a>
    </div>
    <div class="message">
        <router-link to="/Form">
            <div>
                <img src="../../../static/img/icon-zaixianliuyan.png" alt="">
            </div>
            <p>在线留言</p>
        </router-link> 
    </div>
    <div class="qq">
        <a href="tel:18683958998">
            <div>
                <img src="../../../static/img/icon-dianhuazixun.png" alt="">
            </div>
            <p>售后热线</p>
        </a>
    </div>
    <!-- <div class="qq">
        <a href="#">
            <div>
                <img src="../../../static/img/icon-qq.png" alt="">
            </div>
            <p>QQ咨询</p>
        </a>
    </div> -->
  </div>
</template>
<script>
export default {
  name: 'Interactive',
  data(){
      return {

      }
  }
}
</script>
<style scoped>
.interactive{
    width: 100%;
    height:.97rem;
    background-color: #1d2977;
    text-align: center;
    display: flex;
    justify-content:center;
    align-items: center;
    position: fixed;
    bottom: 0;
    z-index: 999;
}
.interactive .phone {
    width: 1.1rem;
    height: auto;
    display: inline-block;
}
.interactive .phone a{
    width: 1.1rem;
    height: auto;
    display: inline-block;
}
.interactive .phone a div{
    width: 100%;
    height: .45rem;
}
.interactive .phone a div img{
    width: .45rem;
    height: auto;
}
.interactive .phone a p{
    font-size: .2rem;
    color: #fefefe;
}
.interactive .message {
    width: 1.1rem;
    height: auto;
    display: inline-block;
    margin-left: 2rem;
}
.interactive .message a{
    width: 1.1rem;
    height: auto;
    display: inline-block;
}
.interactive .message a div{
     width: 100%;
    height: .45rem;
}
.interactive .message a div img{
    width: .45rem;
    height: auto;
}
.interactive .message a p{
    font-size: .2rem;
    color: #fefefe;
}
.interactive .qq{
    width: 1rem;
    height: auto;
    display: inline-block;
    margin-left: 2rem;
}
.interactive .qq a{
    width: 1rem;
    height: auto;
    display: inline-block;
}
.interactive .qq a div{
    width: 100%;
    height: .45rem;
}
.interactive .qq a div img{
    width: .45rem;
    height: auto;
}
.interactive .qq a p{
    font-size: .2rem;
    color: #fefefe;
}
@media screen and (max-width: 320px) {
.interactive .phone {
    width: 1.3rem;
    height: auto;
    display: inline-block;
}
.interactive .phone a{
    width: 1.3rem;
    height: auto;
    display: inline-block;
}
.interactive .message {
    width: 1.3rem;
    height: auto;
    display: inline-block;
    margin-left: 1.5rem;
}
.interactive .message a{
    width: 1.3rem;
    height: auto;
    display: inline-block;
}
.interactive .qq{
    width: 1.3rem;
    height: auto;
    display: inline-block;
    margin-left: 1.5rem;
}
.interactive .qq a{
    width: 1.3rem;
    height: auto;
    display: inline-block;
}    
}
</style>
